<script setup lang="ts">
import { PropType, watch, ref, reactive } from 'vue'
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { required } from '@/utils/formRules'
import { zcPastureListApi } from '@/api/fa/pasture'
import { ucDeptListApi } from '@/api/uc/dept'
import { ucOrgDeptUserListApi } from '@/api/fa/user'
import { spEnclosureListApi } from '@/api/fa/enclosure'
import { useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache()
const dict: any = wsCache.get('dict')

const props = defineProps({
  formData: {
    type: Object as PropType<Nullable<any>>,
    default: () => null
  }
})
const data = ref<any>({})
const newDeptTreeData = ref<any[]>([])
const newTreeData = ref<any[]>([])

const onCustomer = async (value) => {
  if (value != data.value.pasture_org_id) {
    data.value.pasture_org_id = value
    newDeptTreeData.value = []
    data.value.pasture_dept_id = ''
    data.value.pasture_dept_name = ''
    await DeptList(value)
    // await getList(value)
  }
  await methods.setValues(data.value)
}
const DeptList = async (value) => {
  const res = await ucDeptListApi({ org_id: value })
    .catch(() => {})
    .finally(() => {})
  if (res) {
    newDeptTreeData.value = res.data
  }
}
const newUserData = ref<any[]>([])
const UserList = async (value) => {
  data.value.pasture_dept_id = value
  newUserData.value = []
  const params = {
    org_id: data.value.pasture_org_id,
    dept_id: value
  }
  const res = await ucOrgDeptUserListApi(params)
    .catch(() => {})
    .finally(() => {})
  if (res) {
    newUserData.value = res.data
  }
}
const stateChangeUser = async (value) => {
  data.value.pasture_user_id = value
}

const schema = reactive<FormSchema[]>([
  {
    field: 'pasture_org_id',
    label: '所属牧场',
    component: 'DialogRefer',
    formItemProps: {
      rules: [required]
    },
    componentProps: {
      getListApi: zcPastureListApi,
      response: { count: 'count', data: 'data' },
      title: '选择牧场（双击选择）',
      nameField: 'pasture_org_name',
      relNameField: 'name',
      valueField: 'org_id',
      crudSchemas: [{ field: 'org_name', label: '牧场名称', search: { show: true } }],
      modelName: data.value.pasture_org_name,
      onChange: onCustomer,
      disabled: false
    }
  },
  {
    field: 'pasture_dept_id',
    label: '所属部门',
    component: 'TreeSelect',
    componentProps: {
      data: newDeptTreeData,
      'check-strictly': true,
      'default-expand-all': true,
      'node-key': 'dept_id',
      props: {
        children: 'children',
        label: 'dept_name'
      },
      onChange: UserList
    }
  },
  {
    field: 'pasture_user_id',
    label: '牧场用户',
    component: 'TreeSelect',
    componentProps: {
      data: newUserData,
      'check-strictly': true,
      'default-expand-all': true,
      'node-key': 'user_id',
      props: {
        children: 'children',
        label: 'nickname'
      },
      onChange: stateChangeUser
    }
  },
  {
    field: 'parent_id',
    label: '上级分类',
    component: 'TreeSelect',
    componentProps: {
      data: newTreeData,
      'check-strictly': true,
      'default-expand-all': true,
      'node-key': 'id',
      props: {
        children: 'children',
        label: 'name'
      }
    }
  },
  {
    field: 'name',
    label: '分类名称',
    component: 'Input',
    formItemProps: {
      rules: [required]
    }
  },
  {
    field: 'code',
    label: '分类代码',
    component: 'Input',
    formItemProps: {
      rules: [required]
    }
  },
  // {
  //   field: 'type',
  //   label: '栏位类型',
  //   component: 'Input',
  //   formItemProps: {
  //     rules: [required]
  //   }
  // },
  {
    field: 'type',
    label: '类型',
    component: 'Select',
    componentProps: {
      options: dict.enclosure
    },
    formItemProps: {
      rules: [required]
    }
  },
  {
    field: 'disp_order',
    label: '显示顺序',
    component: 'InputNumber',
    componentProps: {
      min: 0
    }
  }
])

const { register, methods, elFormRef } = useForm({
  schema
})

watch(
  () => props.formData,
  (value) => {
    if (!value) return
    const { setValues } = methods
    setValues(value)
  },
  {
    deep: true,
    immediate: true
  }
)

defineExpose({
  elFormRef,
  getFormData: methods.getFormData,
  oldFormData: props.formData
})
let enclosureData = []
const getEnclosure = async () => {
  const res = await spEnclosureListApi({ org_id: props.formData.pasture_org_id })
    .catch(() => {})
    .finally(() => {})
  if (res) {
    enclosureData = res.data
    newTreeData.value = [{ id: '0', name: '=== 顶级 ===' }, ...enclosureData]
  }
}

const init = async () => {
  getEnclosure()
  if (props.formData.pasture_org_id) {
    data.value.pasture_org_id = props.formData.pasture_org_id
    await DeptList(props.formData.pasture_org_id)
    if (props.formData.pasture_dept_id) {
      data.value.pasture_dept_id = props.formData.pasture_dept_id
      await UserList(props.formData.pasture_dept_id)
    }
  }
}
init()
</script>

<template>
  <Form @register="register" :data="data" />
</template>
